<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入LayUI的资源-->
    <script src="/layui/layui.js"></script>
    <script src="/js/jquery.js"></script>
    <link href="/layui/css/layui.css" rel="stylesheet"/>
</head>
<!--<body style="background-image: url('/images/login.jpg'); background-repeat: no-repeat; background-size: cover;">-->

    <!--声明登录窗口-->
    <div id="usernameDiv" style="border: solid 2px gray;width: 400px;height: 250px;border-radius: 10px;margin: auto;margin-top: 300px;padding-top: 30px;">
        <h3 style="margin-bottom: 20px; text-align: center" >班级管理系统</h3>
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">账户:</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" required  lay-verify="required" placeholder="账号/手机号/邮箱" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码:</label>
                <div class="layui-input-inline">
                    <input type="password" name="pwd" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">点击登录</button>
                    &nbsp; &nbsp; &nbsp; &nbsp;
                    <input type="checkbox" name="rememberMe" title="记住我" lay-skin="primary" value="true" checked>
                    <div class="layui-form-mid layui-word-aux" style="text-align: center">
                        <a href="javascript:void(0)" id="phoneLogin" style="color: red">手机登录</a>
                        &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp;
                       <a href="/register" style="color: red">立即注册</a>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div id="phoneDiv" style="border: solid 2px gray;width: 400px;height: 200px;border-radius: 10px;margin: auto;margin-top: 300px;padding-top: 30px;display:none">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">手机号:</label>
                <div class="layui-input-inline">
                    <input type="text" id="username" name="username"   placeholder="手机号" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">验证码:</label>
                <div class="layui-input-inline">
                    <input type="text" style="width: 100px" name="userCode"  class="layui-input">
                    <span><a href="javascript:void(0)" id="sendCode">发送验证码</a></span>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formPhoneDemo">点击登录</button>
                    &nbsp; &nbsp; &nbsp; &nbsp;
                    <a href="">返回</a>
                </div>
            </div>
            </div>
        </form>
    </div>


</body>
</html>

<script>
    //Demo
    layui.use('form', function(){
        var form = layui.form;
        //TODO 监听提交
        form.on('submit(formDemo)', function(data){
            console.log(data)
            //TODO 发起Ajax请求
            $.post("/userLogin",data.field,function (result){
                if(result.code==200){
                    window.location.href="/main";
                }
            })
            return false;
        });
        //TODO 监听提交
        form.on('submit(formPhoneDemo)', function(data){
            console.log(data)
            //TODO 发起Ajax请求
            $.post("/phoneLogin",data.field,function (result){
                if(result.code==200){
                    window.location.href="/main";
                }
            })
            return false;
        });

    });

    //TODO 声明页面加载事件
    $(function (){
        $("#phoneLogin").click(function (){
            //TODO 隐藏账号密码的div
            $("#usernameDiv").css("display","none");
            //TODO 显示手机号登录的Div
            $("#phoneDiv").css("display","");
        })
    })
    //TODO 点击发送验证码
    $(function (){
        $("#sendCode").click(function (){
            var $this = $(this);
            //TODO 发起Ajax请求
            $.post("/getPhoneCode",{phone:$("#username").val()},function (result){
                if(result.code==200){
                    var time=60;
                    //TODO 添加倒计时效果
                    var id=window.setInterval(function (){
                        if(time>=1){
                            time=time-1;
                            $this.html(time+"s后重新获取验证码");
                        }else{
                            window.clearInterval(id);
                            $this.html("发送验证码")
                        }
                    },1000)
                }else{
                    alert("手机号未被注册")
                }
            })
        })
    })
</script>